<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .other1 {
            font-size: 22px;
            color: blue;
            background-color: red;
        }

        .other2 {
            font-style: italic;
        }

        .other3 {
            position: fixed;
            top: 200px;
        } */

        .s1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- <div class="box">className与classList</div> -->

    <p class="s1">style </p>
    <script>
        // var div = document.querySelector("div");

        // // className
        // // 获取
        // console.log(div.className);

        // // 设置
        // // div.className = "other1"
        // // // 这样做会直接覆盖
        // // console.log(div);

        // // 这样做不会覆盖
        // div.className += " other1"
        // console.log(div);


        // // classList  方法
        // // 增加
        // div.classList.add("other2")
        // console.log(div);

        // // 删除
        // div.classList.remove("box")
        // console.log(div);

        // // 替换
        // div.classList.replace("other2", "other3")
        // console.log(div);

        var p = document.querySelector("p")

        p.style.color = "red";
        p.style.fontSize = "33px";
        console.log(p);

        // 即等于

        p.style.cssText = "color:red;font-size:33px";
        console.log(p);


        // 获取样式
        var m = getComputedStyle(p, null).height
        console.log(m);

        // 兼容性函数
        function getStyle(element, styleName) {

            if (window.getComputedStyle) {
                return getComputedStyle(element, null)[styleName];
            } else {
                return element.currentStyle[styleName];
            }
        }

        getStyle(boxEle, "width");


    </script>
</body>

</html>